<template>

  <!--面包屑-->
  <div>
    <el-breadcrumb separator="/" style="padding-left: 10px;padding-bottom: 10px;font-size: 12px">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片-->
    <el-card class="box-card">
      <el-form :inline="true" :model="userVO" class="demo-form-inline">
        <el-form-item label="部门" label-width="70px">
          <el-select v-model="userVO.departmentId" placeholder="请选择">
            <el-option
              v-for="item in deptList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
              <span style="float: left">{{ item.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">
                <span class="el-tag el-tag--success el-tag--mini el-tag--plain">{{ item.deptCount }}</span>
              </span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户名"  label-width="70px">
          <el-input v-model="userVO.username" placeholder="请输入用户名" clearable></el-input>
        </el-form-item>
        <el-form-item label="邮箱"  label-width="70px">
          <el-input v-model="userVO.email" placeholder="请输入邮箱" clearable></el-input>
        </el-form-item>
        <el-form-item  label-width="70px">
          <el-radio v-model="userVO.sex" label="0">男</el-radio>
          <el-radio v-model="userVO.sex" label="1">女</el-radio>
          <el-radio v-model="userVO.sex" label="">全部</el-radio>
        </el-form-item>
        <el-form-item label="昵称"  label-width="70px">
          <el-input v-model="userVO.nickname" placeholder="请输入昵称" clearable></el-input>
        </el-form-item>
        <el-form-item style="margin-left: 10px">
          <el-button type="primary" icon="el-icon-refresh" @click="resertUserVO">重置</el-button>
          <el-button type="primary" icon="el-icon-search" @click="getUserList">查询</el-button>
          <el-button type="success" icon="el-icon-plus" @click="show" v-if="" v-has-permission="'user:add'">添加</el-button>
          <el-button type="warning" icon="el-icon-download" @click="exportTable">导出</el-button>
          <el-button type="warning" icon="el-icon-download" @click="importTable">导入</el-button>
          <el-button type="warning" icon="el-icon-download" @click="resetpassword">批量重置密码</el-button>
          <el-button type="warning" icon="el-icon-edit" @click="show1(userIdbj)">编辑</el-button>
        </el-form-item>
      </el-form>
      <!--表格内容-->
      <el-table
        ref="multipleTable"
        tooltip-effect="dark"
        :data="userList"
        border
        style="width: 100%"
        max-height="400px"
        @selection-change="handleSelectionChange"
        @row-click="updateThisUerId"
        >
        <el-table-column
          id=""
          type="selection"
          prop="id"
          label="全选"
          width="50">
        </el-table-column>
        <el-table-column
          prop="id"
          label="#"
          width="50">
        </el-table-column>
        <el-table-column
          prop="username"
          label="用户名"
          width="110">
        </el-table-column>
        <el-table-column
          prop="sex"
          label="性别"
          width="110">
          <template slot-scope="scope">
            {{scope.row.sex == 0 ? '男' : scope.row.sex == 1 ? '女' : '保密'}}
          </template>
        </el-table-column>
        <el-table-column
          sortable
          prop="name"
          label="所属部门"
          width="180">
        </el-table-column>
        <el-table-column
          sortable
          prop="birth"
          label="生日"
          width="150">
        </el-table-column>
        <el-table-column
          prop="email"
          label="邮箱"
          width="180">
        </el-table-column>
        <el-table-column
          prop="phoneNumber"
          label="电话"
          width="130">
        </el-table-column>
        <el-table-column
          prop="status"
          label="是否禁用"
          width="100">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status == 1"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-edit" @click="show1(scope.row.id)"></el-button>
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteUser(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="padding-top: 15px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page=currentPage
        :page-sizes="[6, 10, 20, 30]"
        :page-size=pageSize
        layout="total, sizes, prev, pager, next, jumper"
        :total=total>
      </el-pagination>
      <m-import-excel
        :dialogVisible =this.importVisible
        @UpDateImportVisible="UpDateImportVisible"
      ></m-import-excel>
      <UserAdd
        :addOrUpdateVisible="addOrUpdateVisible"
        :departmentIdOptions = "deptList"
        @changeShow="showAddOrUpdate"
        ref="addOrUpdateRef"></UserAdd>
      <user-edit
        :updateVisible="updateVisible"
        :departmentIdOptions = "deptList"
        @changeShow="showAddOrUpdate"
        :updateUserVO = "updateUserVO"
        ref='UserEdit'
      ></user-edit>
    </el-card>
  </div>
</template>

<script>
import { findUserList, saveUser } from '@/api/users'
import {findDeptAndCount} from '@/api/dept'
import UserAdd from '@/views/users/UserAdd'
import {resetPasswordBatch} from '@/api/users'
import {deleteUsers} from '@/api/users'
import {findUserById} from '@/api/users'
import {exportUsers} from '@/api/users'
import mImportExcel from '@/views/mImportExcel'
import UserEdit from '@/views/users/UserEdit'

export default {
  name: 'User',
  components:{
    UserEdit,
    mImportExcel,
    UserAdd
  },
  data() {
    return {
      addOrUpdateVisible:false,
      updateVisible:false,
      importVisible:false,
      currentPage: 1,
      pageSize: 6,
      total : 100,
      userIdbj:'',
      userVO: {
        id:'',
        departmentId: '',
        username:'',
        email:'',
        sex:'',
        nickname:'',
        isUploadModel:'0'
      },
      userList:[],
      deptList:[],
      multipleSelection:[],
      updateUserVO:{},
      btnLoading: false,

    }
  },
  methods: {
    updateThisUerId(event){
      this.userIdbj = event.id
      console.log(this.userIdbj)
    },
    UpDateImportVisible(data){
      console.log(data)
      if(data === false){
        this.importVisible = false
        console.log(this.importVisible)
      }else{
        this.importVisible = true
        console.log(this.importVisible)
      }
    },
    onSubmit() {
      console.log('submit!');
    },
    handleSizeChange(val) {
      this.size = val;
      this.getUserList();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getUserList();
    },
    getUserList(){
      findUserList(this.currentPage,this.size,this.userVO).then(res => {
        this.userList = res.data.data
        this.total = res.data.data.size
      })
    },
    getDeptAndCount(){
      findDeptAndCount().then(res => {
        this.deptList = res.data.data
      })
    },
    resertUserVO(){
      this.userVO = {}
    },
    //点击显示新增弹框
    show(){
      this.addOrUpdateVisible = true
    },
    importTable(){
      this.importVisible = true
    },
    //点击显示编辑弹框
    show1(userId){
      console.log(userId)
      if(userId == null || userId == ''){
        const h = this.$createElement;
        this.$notify({
          title: '请选择一条数据',
          message: h('i', { style: 'color: red' }, '请选择一个用户')
        });
      }else {
        findUserById(userId).then(res => {
          this.updateUserVO = res.data.data
          console.log("this.updateUserVO")
          this.updateVisible = true
        },error => {
          return this.$message.error('用户操作失败:'+ error.msg)
        })
      }
    },
    //监听 子组件弹窗关闭后触发  由子组件调用
    showAddOrUpdate(data){
      this.getUserList();
      if(data === 'false'){
        this.addOrUpdateVisible = false
        this.updateVisible =false
      }else{
        this.addOrUpdateVisible = true
        this.updateVisible =true
      }
    },
    showUpdate(data){
      this.getUserList();
      if(data === 'false'){
        this.updateVisible = false
        this.userIdbj = ''
      }else{
        this.updateVisible = true
      }
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      console.log("handleSelectionChange")
      console.log(val)
      this.multipleSelection = val;
    },
    resetpassword(){
      resetPasswordBatch(this.multipleSelection).then(res =>{
        this.$notify({
          title: '成功',
          message: '批量重置成功',
          type: 'success'
        });
      },error => {
        this.$notify({
          title: '成功',
          message: '批量重置失败',
          type: 'success'
        });
      })
    },
    deleteUser(userId){
      console.log(userId);
        this.$confirm('此操作将永久删除该用户信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteUsers(userId).then(res => {
            console.log("1123")
            console.log(res)
            if(res.code == 200){
              this.$notify.success({
                title:'删除用户成功',
                message:'删除用户成功'
              })
            }else{
              return this.$message.error('用户删除失败:'+ res.data.msg)
            }
          },error => {
            console.log(error)
            return this.$message.error('用户删除失败:'+ error.data.msg)
          });
        });
    },
    exportTable() {
      this.$confirm('确定导出用户', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        exportUsers(this.userVO).then(res => {
          this.btnLoading = false;
          console.log(res)
          console.log(res)
          if (res.data.type) {
            // 文件下载
            const blob = new Blob([res.data], {
              type: "application/vnd.ms-excel"
            });
            let link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.setAttribute('download', '导出文件.xlsx');
            link.click();
            link = null;
            this.$message.success('导出成功');
          } else {
            // 返回json
            this.$message.warning(res.data.msg);
          }

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '导出异常'
          });
        });
      })
    }
  },
  created () {
    this.getDeptAndCount();
    this.getUserList();
  }
}
</script>

<style scoped>

</style>
